<script setup lang="ts">
import { ref, watch, getCurrentInstance, useTemplateRef, shallowRef } from "vue"
import ModelObj from "./ModelObj.vue"
import * as types from "../types"
const props = defineProps<{ model: string }>()
const name = ref("")
const desc = ref("")
const modelObj = shallowRef<types.model>({})
const r = useTemplateRef('input')
let oriName = ''
const ins = getCurrentInstance()!
function checkName() {
    const model = ins.appContext.config.globalProperties.$model
    if (oriName != name.value) {
        delete model[oriName]
        oriName = name.value
    }
    r.value!.update()
    let res: types.model = structuredClone(modelObj.value)
    if (desc.value != '') res['_desc'] = desc.value;
    model[name.value] = res
}
watch(() => props.model, (val) => {
    oriName = val
    name.value = val
    desc.value = ''
    const model: types.model = ins.appContext.config.globalProperties.$model[val]
    if ('_desc' in model) {
        desc.value = model._desc as string
    }
    modelObj.value = model
}, { immediate: true })
defineExpose({
    checkName
})
</script>
<template>
    <a-form autocomplete="off" style="min-width: 600px;">
        <a-form-item label="名称">
            <a-input v-model:value="name" />
        </a-form-item>
        <a-form-item label="备注">
            <a-input v-model:value="desc" />
        </a-form-item>
        <ModelObj v-model="modelObj" ref="input" />
    </a-form>
</template>
<style></style>